<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/static/css/element-ui.css">
  </head>
  <body>
    <!--<div>https://shockerli.net/post/golang-pkg-http-file-server/</div>-->
    <div id="app" style="width: 60%;height: 100%;margin: 30px 20%;">
      <el-container>
        <el-header>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>${current_workflow.name}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main>
          <el-table
          :data="history"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="num"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
            width="360">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="120">
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间">
          </el-table-column>
          <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <a target="about:_blank" :href="'/detail?workflow_id=' + workflow_id +'&history_id='+ scope.row.id"><el-button type="text" size="small">查看</el-button></a>
          </template>
        </el-table-column>
      </el-table>
        </el-main>
      </el-container>
    </div>

    <script type="text/javascript" src="/static/js/vue.js"></script>
    <script type="text/javascript" src="/static/js/element-ui.js"></script>
    <script type="text/javascript" src="/static/js/axios.min.js"></script>
    <script type="text/javascript" src="/static/js/libs.js"></script>

    <script>
      var app = new Vue({
        delimiters: ['${', '}'],
        el: "#app",
        data: function(){
          return {
            history: [],
            workflow_id: {{.workflow_id}},
            current_workflow: {},
          }
        },
        created: function(){
          this.fetchWorkflow()
          this.fetchHistory()
        },
        methods: {
          tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
              return 'warning-row'
            } else if (rowIndex === 3) {
              return 'success-row'
            }
            return ''
          },
          fetchWorkflow(id) {
            axios.get("/api/workflow?id="+this.workflow_id).then(res => {
              this.current_workflow = res.data
            }, err => {
              console.log(err)
            })
          },
          fetchHistory() {
            axios.get("/api/history?id="+this.workflow_id).then(res => {
              this.history = res.data
            }, err => {
              console.log(err)
            })
          }
        }
      })
    </script>

  </body>
</html>